import Taro, { Component } from "@tarojs/taro";
import { connect } from "@tarojs/redux";
import _isEmpty from 'lodash/isEmpty'
import { View } from '@tarojs/components'
import { getPublicData } from '@/actions/common'

import BaseButton from '@/components/BaseButton'
import RadioItem from "@/components/RadioItem";
import GTag from "@/components/GTag";
import RowTip from "@/components/RowTip";

import './index.scss';

@connect(({ common}) => ({
  common
}))
class IncrementService extends Component {

  config = {
    navigationBarTitleText: '增值服务'
  };

  constructor(props) {
    super(props);
    this.state = {
      incList: [],
    }
  }

  componentDidMount(){
    const { dispatch } = this.props
    const type = this.$router.params.type
  
    const lineList = Taro.getStorageSync('traffic_line_addService')
    const addList = Taro.getStorageSync('traffic_goods_addService')

    let list = lineList
    if(!_isEmpty(addList) ){
      this.setState({ incList: addList })
    }else if(!_isEmpty(lineList)){
      this.setState({ incList: lineList })
    }
    
  }

  render() {
    const { incList } = this.state;
    return (
      <View className="increment-page">
        <View className='increment-content'>
          {!_isEmpty(incList) && incList.map((cl, ci) => {
            return (<View key={cl.code}>
              <RadioItem title={cl.name} height={40} isLeft={false} jsContent='space-between' checked={cl.checked} onClick={() => this.handleSelectIncrement(cl, ci)}/>
              {cl.name === '加急班车' && cl.checked && cl.childs && <View className='g-tag-list'>
                {cl.childs.map((dl, di) => {
                  return (<GTag key={dl.code} text={dl.name} width='auto' active={dl.checked} onClick={() => this.handleSelectChildren(dl, ci, di)}/>)
                })}
              </View>}
            </View>)
          })}

          <RowTip text='提示：部分增值服务费用按照实际情况实报实消，请注意。' color='#FF5D24'/>
        </View>

        <BaseButton cls='info-submit-btn btn-bottom' text='确定' type='primary' width='90%' onClick={this.handleSavePremium}/>
      </View>
    )
  }

  handleSavePremium = () => {
    const { incList } = this.state
    Taro.setStorageSync('traffic_goods_addService', incList)
    setTimeout(() => {
      Taro.navigateBack()
    }, 200);
  }

  handleSelectIncrement = (cl, index) => {
    let list = this.state.incList
    list[index].checked = !list[index].checked
    this.setState({
      incList: list 
    })
  }

  handleSelectChildren = (dl, ci, di) => {
    let list = this.state.incList
    let childs = list[ci].childs.map(cl => {
      let td = cl
      if(td.id === dl.id){
        td.checked = true
      }else{
        td.checked = false
      }
      return td
    })
    list[ci].childs = childs
    this.setState({
      incList: list 
    })
  }

  
}

export default IncrementService